<html>
<head>
	<style>
		a {
			text-decoration: none;
			color: #000;
		}
		body {
			width: 500px;
			font-family:  Arial, Helvetica, Verdana, Univers;
		}
		section {
			border-radius: 5px;
			border: 1px solid grey;
			margin-bottom: 5px;
			padding: 5px;
		}
		.notif {
			padding: 2px 5px;
			border-radius: 3px;
			background-color: #aefa6f;
		}
		table {
			width: 100%;
		}
	</style>
</head>
<body>
<h1>{ EpiDash. }</h1>
	<section>
		<h2>Raccourcis</h2>
			<a href="http://www.epitech.eu/intra/index.php?section=etudiant&page=vue_hebdo&origin=chrome_ext">Planning</a>
	</section>
	<section>
	<h2>Notes</h2>
		<table id="last_notes">

		</table>
	</section>
	<section id="notif">
		<h2>Notification</h2>
			Vous avez un token a rentrer : B-dasdfs-324
			<input type='text'></input><input type='button' value='valider'></input>
	</section>
	<script>
		var db = openDatabase("EpiDash", "1.0", "", 200000);
		
		function dellNotif() {
			console.log(this);
		}
		db.transaction(function(tx) {
			tx.executeSql("SELECT titre, note FROM notes ORDER BY date DESC LIMIT 5", [], function(tx, result){
				for (i=0; i < result.rows.length; i++) {
					console.log(result.rows.item(i));
					document.getElementById("last_notes").innerHTML += "<tr><td>"+result.rows.item(i).titre+"</td><td>"+result.rows.item(i).note+"</td></tr>";
				}
			});
		});
		
		chrome.browserAction.setBadgeText({text:""});
		if (localStorage.notif) {
			n = localStorage.getItem("notif");
			n = n.split("|");
			console.log(n);
			if (n[0] == "note") {
				document.getElementById("notif").innerHTML += "<div class='notif' onclick='dellNotif()'>"+n[1]+" : "+n[2]+"</div>";
			}
		}
	</script>
</body>
</html>